<template>
	<view class="page">
		<view class="job-content-head">
			<view class="job-enterprise-title">
				<view class="job-enterprise-title-text">{{ positioninfo.ZWName }}</view>
				<view class="job-enterprise-title-poster">生成海报</view>
			</view>
			<u-gap height="2" bgColor="#f5f5f5"></u-gap>
			<view class="job-important-tips">{{ positioninfo.TiShi }}</view>
		</view>
		<u-gap height="5" bgColor="#f5f5f5"></u-gap>
		<view class="job-content-body">
			<view class="job-description-show">
				<view class="job-description-title">{{ positioninfo.ZWName }}</view>
				<view class="job-description-salary">{{ positionType == 2 ? positioninfo.XZName : '' }}{{ positionType == 1 ? positioninfo.XZName + '元/月' :'' }}</view>
				<view class="job-description-other">
					<view class="job-description-time">更新：{{$u.timeFrom(positioninfo.ShiJian, false)}}</view>
					<view class="job-description-browse">浏览:{{ positioninfo.Hits }}人</view>
					<view class="job-description-apply">申请:{{ positioninfo.SQCount }}人</view>
				</view>
			</view>
			<u-gap height="2" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-attribute">
				<view class="job-description-position">
					职位：
					<text>{{ positioninfo.ZWClass }}</text>
				</view>
				<view class="job-description-number">
					人数：
					<text>招聘{{ positioninfo.ZPNum }}人</text>
				</view>
				<view class="job-description-ask">
					要求：
					<text>{{ positioninfo.YaoQiu }}</text>
				</view>
				<view class="job-description-welfare">
					福利：
					<!-- <view class="job-description-welfare-item" v-for="(item, index) in positioninfo.FuLiList.slice(0, 5)" :key="index"><u-tag :text="item.FuLi" bgColor="#f7d9da" color="#c8000a" size="mini" type="warning"></u-tag></view> -->
					<view class="job-description-welfare-item" v-for="(item, index) in positioninfo.FuLiList" :key="index"><u-tag :text="item.FuLi" bgColor="#f7d9da" color="#c8000a" size="mini" type="warning"></u-tag></view>
				</view>
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-address">
				<view class="job-description-address-title">工作地址</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				<view class="job-description-address-content" @click="openMap()">
					<text>{{ positioninfo.Address }}</text>
					<u-icon name="play-right-fill" color="#666666" size="10"></u-icon>
				</view>
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-descride">
				<view class="job-description-descride-title">职位描述</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				<view class="job-description-descride-content">
					<view class="job-description-descride-content-text"><u-parse :content="positioninfo.ZWMS"></u-parse></view>
					<view class="job-description-descride-imagegroup" v-if="positioninfo.ZWPic.length > 0">
						<!-- 当只有一个图片时显示这个样式 -->
						<block v-if="positioninfo.ZWPic.length == 1"><u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" :src="$getImgUrl(positioninfo.ZWPic[0].ZWImg)" width="100%" @click="companyImagePreview(0)"></u--image></block>
						<!-- 当只有大于1个小于4个图片时显示这个样式 -->
						<block v-else-if="positioninfo.ZWPic.length > 1 && positioninfo.ZWPic.length < 4">
							<view class="job-description-descride-image-four">
								<view class="job-description-descride-image-fouritem" v-for="(item, index) in positioninfo.ZWPic" :key="index">
									<u--image :showLoading="true" :mode="aspectFit" :lazyLoad="true" :src="$getImgUrl(item.ZWImg)" width="100%" height="339rpx" @click="companyImagePreview(index)"></u--image>
								</view>
								<!-- <view class="job-description-descride-image-fouritem">
									<u--image :showLoading="true" :mode="aspectFit" :lazyLoad="true" src="/static/job/name.jpg" width="100%" height="339rpx"></u--image>
								</view>
								<view class="job-description-descride-image-fouritem">
									<u--image :showLoading="true" :mode="aspectFit" :lazyLoad="true" src="/static/job/name.jpg" width="100%" height="339rpx"></u--image>
								</view> -->
							</view>
						</block>
						<!-- 当只有大于4个图片时显示这个样式 -->
						<block v-else>
							<view class="job-description-descride-image-six">
								<view class="job-description-descride-image-sixitem" v-for="(item, index) in positioninfo.ZWPic" :key="index">
									<u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" :src="$getImgUrl(item.ZWImg)" width="100%" height="218rpx" @click="companyImagePreview(index)"></u--image>
								</view>
								<!-- <view class="job-description-descride-image-sixitem">
									<u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" src="/static/job/banner1.jpg" width="100%" height="218rpx"></u--image>
								</view>
								<view class="job-description-descride-image-sixitem">
									<u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" src="/static/job/firm1.jpg" width="100%" height="218rpx"></u--image>
								</view>
								<view class="job-description-descride-image-sixitem">
									<u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" src="/static/job/pic1.png" width="100%" height="218rpx"></u--image>
								</view>
								<view class="job-description-descride-image-sixitem">
									<u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" src="/static/job/pic2.png" width="100%" height="218rpx"></u--image>
								</view>
								<view class="job-description-descride-image-sixitem">
									<u--image :showLoading="true" mode="aspectFit" :lazyLoad="true" src="/static/job/name_qy.jpg" width="100%" height="218rpx"></u--image>
								</view> -->
							</view>
						</block>
					</view>
				</view>
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-company">
				<view class="job-description-company-title">公司信息</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				<view class="job-description-company-content">
					<view class="job-description-company-show" @click="goToCompanyShow(positioninfo.ComID)">
						<view class="job-description-company-name">{{ positioninfo.QYName }}</view>

						<view class="job-description-company-auth" v-if="positioninfo.JobRZType == 2">
							<u-icon name="/static/job/qy.png" label="普通企业认证" labelPos="right" labelSize="26rpx" labelColor="#bda170"></u-icon>
						</view>

						<view class="job-description-company-tag">
							<text class="job-description-company-tag-text" v-if="positioninfo.GMName != ''">{{ positioninfo.GMName }}人</text>
							<text class="job-description-company-tag-text" v-if="positioninfo.XingZhi != ''">{{ positioninfo.XingZhi }}</text>
							<text class="job-description-company-tag-text" v-if="positioninfo.ZWClass != ''">{{ positioninfo.ZWClass }}</text>
						</view>
					</view>
					<!-- <view class="job-description-company-more"> -->
					<u-icon name="play-right-fill" color="#666666" size="10"></u-icon>
					<!-- </view> -->
				</view>
			</view>
			<u-gap height="2" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-company-more" @click="goToCompanyShow(positioninfo.ComID)">
				<view class="job-description-company-moretext">该公司所有职位</view>
				<u-icon name="play-right-fill" color="#666666" size="10"></u-icon>
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-comapny-report">
				<view class="job-description-comapny-report-text">
					<view class="job-description-comapny-report-text-red">如遇无效、虚假、诈骗信息，请立即举报</view>
					<view class="job-description-comapny-report-text-black">求职过程请勿缴纳费用，谨防诈骗！若信息不实请举报。</view>
				</view>
				<u-line color="#e3e3e3" direction="col" length="80%" :hairline="false" margin="8rpx"></u-line>
				<view class="job-description-comapny-report-image">
					<u-icon label="举报" labelPos="bottom" size="34rpx" labelSize="24rpx" labelColor="#c8000a;" name="/static/job/jb.png"></u-icon>
				</view>
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-description-recommend-position">
				<view class="job-description-recommend-position-title">推荐职位</view>
				<u-gap height="2" bgColor="#f5f5f5"></u-gap>
				<view class="job-description-recommend-position-list">
					<HotJobs :hotJobsList="jobsList"></HotJobs>
					<u-loadmore :status="loadMoreStatus" loading-text="努力加载中..." loadmore-text="上拉加载" nomore-text="没有更多信息..." />
				</view>
			</view>
		</view>

		<view class="job-content-bottom" style="height: 100rpx;"></view>
		<!-- 底部导航菜单开始 -->
		<view class="job-content-tabbar u-safe-bottom u-safe-area-inset-bottom">
			<view class="job-content-tabbar-home" @click="goHome()">
				<u-icon name="home-fill" color="#c8000a" size="27px" label="首页" labelPos="bottom" labelSize="11px" labelColor="#333333" space="2px"></u-icon>
			</view>
			<u-line color="#e3e3e3" direction="col" :hairline="false" length="100%"></u-line>
			<view class="job-content-tabbar-other">
				<view class="job-content-tabber-other-average">
					<view class="job-content-tabber-other-phone" @click="callPhone()">
						<u-icon name="phone-fill" color="#c8000a" size="27px" label="电话" labelPos="bottom" labelSize="11px" labelColor="#333333" space="2px"></u-icon>
					</view>
					<view class="job-content-tabber-other-favorite" @click="getJobContentCollection()">
						<u-icon :name="isCollection == 1? 'star-fill' : 'star'" color="#c8000a" size="27px" :label="isCollection == 1? '已收藏' : '收藏'" labelPos="bottom" labelSize="11px" labelColor="#333333" space="2px"></u-icon>
					</view>
					<view class="job-content-tabber-other-apply" @click="openResumeListPopupShow()" v-if="isApply == 0 ">
						<text>申请职位</text>
					</view>
					<view class="job-content-tabber-other-applied" v-if="isApply == 1">
						<text>职位已经申请</text>
						<view class="job-content-tabber-other-apply-number">已投递简历{{ positioninfo.SQCount }}人</view>
					</view>
					<view class="job-content-tabber-other-applied" v-if="isApply != 1 && isApply != 0">已过期</view>
				</view>
			</view>
		</view>
		<!-- 底部导航菜单结束 -->
		<!-- 选项列表开始 -->
		<!-- <ld-select
			:list="resumeListDataTree"
			labelKey="label"
			valueKey="value"
			placeholder="请选选择一份简历"
			v-model="workExperience"
			:clearable="false"
			bgColor="#ffffff"
			selectColor="#c70000"
			@change="workExperienceSelectChange"
		></ld-select> -->
		
		<u-popup :show="popupShow" :round="10" :duration="1" :closeOnClickOverlay="true" @close="closeResumeListPopupShow()">
			<view class="job-content-popup-resume-head">
				<view class="job-content-popup-resume-head-title">请选择一份简历</view>
				<view class="job-content-popup-close" @click="closeResumeListPopupShow()">
					<u-icon name="close-circle-fill" color="#cccccc" size="50rpx"></u-icon>
				</view>
			</view>
			<view class="job-content-popup-resume-list" v-if="myResumeList.length">
				<view class="job-content-popup-resume-item" :class="selectResumeIndex == index ? 'job-content-popup-resume-item-select' : ''" v-for="(item,index) in myResumeList" :key="index" @click="selectMyResume(item.ID, index)">
					{{ item.GWName }}
				</view>
			</view>
			<view class="job-content-popup-resume-none" v-else>
				 <view class="job-content-popup-resume-none-content">您还没有添加简历无法投递。<text @click="goPostResume()">立即添加简历</text></view>
			</view>
			<view class="job-content-popup-resume-apply" @click="postJobContentDeliverResume()" v-if="myResumeList.length">立即申请</view>
		</u-popup>
		<!-- 选项列表结束 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import HotJobs from '@/components/HotJobs/HotJobs.vue';
export default {
	data() {
		return {
			positionId: 0, // 招聘信息ID
			positionType: 0, //全职还是兼职1为全职，2为兼职
			positioninfo: {
				Address: '',
				ComID: '',
				FuLiList:[],
				GMName: '',
				HangYe: '',
				Hits: '',
				IsSC: '',
				IsSQ: '',
				JSType: '',
				JobRZType: '',
				Phone: '',
				QYName: '',
				SQCount: '',
				ShiJian: '',
				TiShi: '',
				XZName: '',
				XingZhi: '',
				YaoQiu: '',
				ZPNum: '',
				ZWClass: '',
				ZWMS: '',
				ZWName: '',
				ZWPic: [],
				ZuoBiao: '',
			}, // 职位信息
			thisPage: 1, // 当前默认翻页
			thisAllPage: 1, // 当前所有页面
			loadMoreStatus: 'loading', // 加载状态
			jobsList: [], // 招聘列表
			isCollection: 0, // 收藏状态
			isApply: 0, // 职位申请状态
			myResumeList: [
				// {
				// 	ID: 1,
				// 	JobID2: '21',
				// 	GWName: '美容师'
					
				// },
				// {
				// 	ID: 2,
				// 	JobID2: '38',
				// 	GWName: '主播'
					
				// },
				// {
				// 	ID: 3,
				// 	JobID2: '5',
				// 	GWName: '前厅人员'
					
				// },
				// {
				// 	ID: 4,
				// 	JobID2: '25',
				// 	GWName: '保姆月嫂'
					
				// },
				// {
				// 	ID: 5,
				// 	JobID2: '26',
				// 	GWName: '保洁员'
					
				// },
				// {
				// 	ID: 6,
				// 	JobID2: '16',
				// 	GWName: '主管/经理'
					
				// },
				// {
				// 	ID: 7,
				// 	JobID2: '16, 10',
				// 	GWName: '主管/经理，客服/文员'
					
				// },
				// {
				// 	ID: 8,
				// 	JobID2: '16, 10',
				// 	GWName: '美容师'
					
				// },
				// {
				// 	ID: 9,
				// 	JobID2: '41',
				// 	GWName: '其他'
				// }
			], // 个人简历列表
			selectResumeIndex: -1 ,// 选择简历的索引
			selectResumeID: 0, // 选择简历的ID
			popupShow: false, // 显示弹出层
		};
	},
	onLoad(option) {
		this.positionId = option.id
		this.positionType = option.jobType
		console.log(this.positionId)
		if(option.jobType == 1) {
			this.getJobContentShow()
		} else if(option.jobType == 2) {
			this.getJobPartTimeContentShow()
		}
		this.getJobContentPositionList()
	},
	methods: {
		// 全职招聘信息
		getJobContentShow() {
			this.$api.getJobContentShow({
				openid: getApp().globalData.openid,
				ID: this.positionId
			}).then(res => {
				this.positioninfo = res.data
				this.isCollection = res.data.IsSC
				this.isApply = res.data.IsSQ
				console.log(res.data)
				
			})
		},
		// 兼职招聘信息
		getJobPartTimeContentShow() {
			this.$api.getJobPartTimeContentShow({
				openid: getApp().globalData.openid,
				ID: this.positionId
			}).then(res => {
				this.positioninfo = res.data
				this.isCollection = res.data.IsSC
				this.isApply = res.data.IsSQ
				console.log(res.data)
				
			})
		},
		// 获取推荐职位列表
		getJobContentPositionList() {
			this.loadMoreStatus = 'loading'
			this.$api.getJobContentPositionList({
				openid: getApp().globalData.openid, 
				page: this.thisPage,
			}).then(res => {
				console.log(res.data)
				this.jobsList = [...this.jobsList, ...res.data.XXList]
				this.thisPage = res.data.CurrentPage
				this.thisAllPage = res.data.Allpage
				this.loadMoreStatus = 'nomore'
			})
		},
		// 获取收藏状态
		getJobContentCollection() {
			this.$api.getJobContentCollection({openid: getApp().globalData.openid,ID: this.positionId}).then(res => {
				// console.log(res.status)
				this.isCollection = res.status
			})
		},
		// 获取简历列表
		getJobContentResumeList() {
			this.$api.getJobContentResumeList({openid: getApp().globalData.openid}).then(res => {
				console.log(res.data)
				this.myResumeList = res.data.XXList
			})
		},
		// 选择简历
		selectMyResume(id, index) {
			this.selectResumeIndex = index
			this.selectResumeID = id
		},
		// 投递建立
		postJobContentDeliverResume() {
			if(this.selectResumeID) {
				this.$api.postJobContentDeliverResume({openid: getApp().globalData.openid, ID: this.positionId ,QZID: this.selectResumeID}).then(res => {
					console.log(res.data)
				})
			} else {
				this.$refs.uToast.show({
					type: 'warning', 
					position: "top", 
					message: '请先选择一份简历', 
					complete() {
						// params.url && uni.navigateTo({
						// 	url: params.url
						// })
					}
				})
			}
			
		},
		// 打开简历列表
		openResumeListPopupShow() {
			this.popupShow = true
		},
		// 关闭简历列表
		closeResumeListPopupShow() {
			this.popupShow = false
		},
		// 预览图片
		companyImagePreview(index){
			let imagesurl = []
			 this.positioninfo.ZWPic.forEach((tupianItem) =>{
				 imagesurl.push(this.$getImgUrl(tupianItem.ZWImg))
			 })
			 uni.previewImage({
				 current:index,
				 urls:imagesurl,
			 })
		},
		openMap() {
			let location = this.positioninfo.ZuoBiao.split(',')
			
			// console.log(location)
			if(location.length == 2) {
				uni.openLocation({
					latitude: Number(location[0]),
					longitude: Number(location[1]),
					success: function () {
						console.log('success');
					}
				});
			}
			
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.positioninfo.Phone 
			});
		},
		goToCompanyShow(id) {
			uni.$u.route({
				url: 'pages/jobCompany/jobCompany',
				params:{
					id: id
				}
			});
		},
		goHome() {
			uni.$u.route({
				url: 'pages/job/job',
			});
		},
		goPostResume() {
			uni.$u.route({
				url: 'pages/jobPostResume/jobPostResume'
			})
		}
		
	},
	components: {
		HotJobs
	}
};
</script>

<style lang="scss" scoped>
@import url('jobContent.css');
</style>
